<!--<template>-->
<!--  <div class="role-management-container">-->
<!--    <div class="filter-container">-->
<!--      <el-input-->
<!--          v-model="listQuery.name"-->
<!--          placeholder="角色名称"-->
<!--          style="width: 200px;"-->
<!--          class="filter-item"-->
<!--          @keyup.enter.native="handleFilter"-->
<!--      />-->
<!--      <el-button-->
<!--          class="filter-item"-->
<!--          type="primary"-->
<!--          icon="el-icon-search"-->
<!--          @click="handleFilter"-->
<!--      >-->
<!--        搜索-->
<!--      </el-button>-->
<!--      <el-button-->
<!--          class="filter-item"-->
<!--          type="primary"-->
<!--          icon="el-icon-plus"-->
<!--          @click="handleCreate"-->
<!--      >-->
<!--        新增角色-->
<!--      </el-button>-->
<!--    </div>-->

<!--    <el-table-->
<!--        v-loading="listLoading"-->
<!--        :data="list"-->
<!--        border-->
<!--        fit-->
<!--        highlight-current-row-->
<!--        style="width: 100%;"-->
<!--    >-->
<!--      <el-table-column label="ID" prop="id" align="center" width="80">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.id }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="角色名称" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.name }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="角色标识" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.code }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="描述" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.description }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="创建时间" align="center" width="180">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.createTime | parseTime }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-button type="primary" size="mini" @click="handleUpdate(row)">-->
<!--            编辑-->
<!--          </el-button>-->
<!--          <el-button type="info" size="mini" @click="handlePermission(row)">-->
<!--            权限-->
<!--          </el-button>-->
<!--          <el-button type="danger" size="mini" @click="handleDelete(row)">-->
<!--            删除-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    <pagination-->
<!--        v-show="total>0"-->
<!--        :total="total"-->
<!--        :page.sync="listQuery.page"-->
<!--        :limit.sync="listQuery.limit"-->
<!--        @pagination="getList"-->
<!--    />-->

<!--    &lt;!&ndash; 新增/编辑对话框 &ndash;&gt;-->
<!--    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">-->
<!--      <el-form-->
<!--          ref="dataForm"-->
<!--          :rules="rules"-->
<!--          :model="temp"-->
<!--          label-position="left"-->
<!--          label-width="100px"-->
<!--          style="width: 400px; margin-left:50px;"-->
<!--      >-->
<!--        <el-form-item label="角色名称" prop="name">-->
<!--          <el-input v-model="temp.name" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="角色标识" prop="code">-->
<!--          <el-input v-model="temp.code" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="角色描述" prop="description">-->
<!--          <el-input v-model="temp.description" type="textarea" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false">-->
<!--          取消-->
<!--        </el-button>-->
<!--        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">-->
<!--          确认-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->

<!--    &lt;!&ndash; 权限配置对话框 &ndash;&gt;-->
<!--    <el-dialog title="权限配置" :visible.sync="dialogPermissionVisible">-->
<!--      <el-tree-->
<!--          ref="permissionTree"-->
<!--          :data="permissionTreeData"-->
<!--          show-checkbox-->
<!--          node-key="id"-->
<!--          :default-expand-all="true"-->
<!--          :props="defaultProps"-->
<!--      />-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogPermissionVisible = false">-->
<!--          取消-->
<!--        </el-button>-->
<!--        <el-button type="primary" @click="updatePermission">-->
<!--          确认-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { fetchRoleList, createRole, updateRole, deleteRole, getRolePermissions, updateRolePermissions } from '@/api/role'-->
<!--import { fetchPermissionTree } from '@/api/permission'-->
<!--import Pagination from '@/components/Pagination'-->

<!--export default {-->
<!--  name: 'RoleManagement',-->
<!--  components: { Pagination },-->
<!--  data() {-->
<!--    return {-->
<!--      list: null,-->
<!--      total: 0,-->
<!--      listLoading: true,-->
<!--      listQuery: {-->
<!--        page: 1,-->
<!--        limit: 20,-->
<!--        name: undefined-->
<!--      },-->
<!--      temp: {-->
<!--        id: undefined,-->
<!--        name: '',-->
<!--        code: '',-->
<!--        description: ''-->
<!--      },-->
<!--      dialogFormVisible: false,-->
<!--      dialogStatus: '',-->
<!--      textMap: {-->
<!--        update: '编辑角色',-->
<!--        create: '新增角色'-->
<!--      },-->
<!--      rules: {-->
<!--        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],-->
<!--        code: [{ required: true, message: '角色标识不能为空', trigger: 'blur' }]-->
<!--      },-->
<!--      // 权限配置相关-->
<!--      dialogPermissionVisible: false,-->
<!--      permissionTreeData: [],-->
<!--      defaultProps: {-->
<!--        children: 'children',-->
<!--        label: 'name'-->
<!--      },-->
<!--      currentRoleId: null-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    this.getList()-->
<!--  },-->
<!--  methods: {-->
<!--    getList() {-->
<!--      this.listLoading = true-->
<!--      fetchRoleList(this.listQuery).then(response => {-->
<!--        this.list = response.data.items-->
<!--        this.total = response.data.total-->
<!--        this.listLoading = false-->
<!--      })-->
<!--    },-->
<!--    handleFilter() {-->
<!--      this.listQuery.page = 1-->
<!--      this.getList()-->
<!--    },-->
<!--    resetTemp() {-->
<!--      this.temp = {-->
<!--        id: undefined,-->
<!--        name: '',-->
<!--        code: '',-->
<!--        description: ''-->
<!--      }-->
<!--    },-->
<!--    handleCreate() {-->
<!--      this.resetTemp()-->
<!--      this.dialogStatus = 'create'-->
<!--      this.dialogFormVisible = true-->
<!--      this.$nextTick(() => {-->
<!--        this.$refs['dataForm'].clearValidate()-->
<!--      })-->
<!--    },-->
<!--    createData() {-->
<!--      this.$refs['dataForm'].validate((valid) => {-->
<!--        if (valid) {-->
<!--          createRole(this.temp).then(() => {-->
<!--            this.dialogFormVisible = false-->
<!--            this.$notify({-->
<!--              title: '成功',-->
<!--              message: '创建成功',-->
<!--              type: 'success',-->
<!--              duration: 2000-->
<!--            })-->
<!--            this.getList()-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    handleUpdate(row) {-->
<!--      this.temp = Object.assign({}, row) // copy obj-->
<!--      this.dialogStatus = 'update'-->
<!--      this.dialogFormVisible = true-->
<!--      this.$nextTick(() => {-->
<!--        this.$refs['dataForm'].clearValidate()-->
<!--      })-->
<!--    },-->
<!--    updateData() {-->
<!--      this.$refs['dataForm'].validate((valid) => {-->
<!--        if (valid) {-->
<!--          const tempData = Object.assign({}, this.temp)-->
<!--          updateRole(tempData).then(() => {-->
<!--            this.dialogFormVisible = false-->
<!--            this.$notify({-->
<!--              title: '成功',-->
<!--              message: '更新成功',-->
<!--              type: 'success',-->
<!--              duration: 2000-->
<!--            })-->
<!--            this.getList()-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    handleDelete(row) {-->
<!--      this.$confirm('确认要删除该角色吗?', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(() => {-->
<!--        deleteRole(row.id).then(() => {-->
<!--          this.$notify({-->
<!--            title: '成功',-->
<!--            message: '删除成功',-->
<!--            type: 'success',-->
<!--            duration: 2000-->
<!--          })-->
<!--          this.getList()-->
<!--        })-->
<!--      }).catch(() => {-->
<!--        this.$message({-->
<!--          type: 'info',-->
<!--          message: '已取消删除'-->
<!--        })-->
<!--      })-->
<!--    },-->
<!--    handlePermission(row) {-->
<!--      this.currentRoleId = row.id-->
<!--      this.dialogPermissionVisible = true-->

<!--      // 获取权限树-->
<!--      fetchPermissionTree().then(response => {-->
<!--        this.permissionTreeData = response.data-->

<!--        // 获取角色已有权限-->
<!--        getRolePermissions(row.id).then(response => {-->
<!--          this.$nextTick(() => {-->
<!--            this.$refs.permissionTree.setCheckedKeys(response.data)-->
<!--          })-->
<!--        })-->
<!--      })-->
<!--    },-->
<!--    updatePermission() {-->
<!--      const checkedKeys = this.$refs.permissionTree.getCheckedKeys()-->
<!--      const halfCheckedKeys = this.$refs.permissionTree.getHalfCheckedKeys()-->
<!--      const permissionIds = checkedKeys.concat(halfCheckedKeys)-->

<!--      updateRolePermissions(this.currentRoleId, { permissionIds }).then(() => {-->
<!--        this.dialogPermissionVisible = false-->
<!--        this.$notify({-->
<!--          title: '成功',-->
<!--          message: '权限配置成功',-->
<!--          type: 'success',-->
<!--          duration: 2000-->
<!--        })-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.filter-container {-->
<!--  margin-bottom: 20px;-->
<!--}-->
<!--.filter-item {-->
<!--  margin-right: 10px;-->
<!--}-->
<!--</style>-->

























<template>
  <div class="role-management-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="角色名称" style="width: 200px;" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">新增角色</el-button>
    </div>

    <el-table
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="80" />
      <el-table-column label="角色名称" prop="name" align="center" />
      <el-table-column label="角色标识" prop="code" align="center" />
      <el-table-column label="描述" prop="description" align="center" />
      <el-table-column label="创建时间" prop="createTime" align="center" />
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
          <el-button type="success" size="mini" @click="handlePermission(row)">权限</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="角色标识" prop="code">
          <el-input v-model="temp.code" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="temp.description" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="权限配置" :visible.sync="permissionDialogVisible" width="600px">
      <el-tree
          ref="permissionTree"
          :data="permissionTreeData"
          show-checkbox
          node-key="id"
          default-expand-all
          :props="defaultProps"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="permissionDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updatePermission">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
  name: 'RoleManagement',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        name: undefined
      },
      temp: {
        id: undefined,
        name: '',
        code: '',
        description: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑角色',
        create: '新增角色'
      },
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '角色标识不能为空', trigger: 'blur' }]
      },
      permissionDialogVisible: false,
      permissionTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      currentRoleId: null
    }
  },
  created() {
    this.getList()
    this.getPermissionTree()
  },
  methods: {
    getList() {
      // 模拟API请求
      const mockData = {
        code: 200,
        data: {
          total: 15,
          items: Array.from({ length: 10 }, (_, i) => ({
            id: i + 1,
            name: `角色${i + 1}`,
            code: `ROLE_${i + 1}`,
            description: `这是角色${i + 1}的描述信息`,
            createTime: new Date().toLocaleString()
          }))
        }
      }

      this.list = mockData.data.items
      this.total = mockData.data.total
    },
    getPermissionTree() {
      // 模拟权限树数据
      this.permissionTreeData = [
        {
          id: 1,
          name: '系统管理',
          children: [
            { id: 11, name: '用户管理' },
            { id: 12, name: '角色管理' },
            { id: 13, name: '权限管理' }
          ]
        },
        {
          id: 2,
          name: '内容管理',
          children: [
            { id: 21, name: '文章管理' },
            { id: 22, name: '分类管理' },
            { id: 23, name: '标签管理' }
          ]
        }
      ]
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        name: '',
        code: '',
        description: ''
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 模拟创建角色
          this.temp.id = parseInt(Math.random() * 100) + 1024
          this.temp.createTime = new Date().toLocaleString()
          this.list.unshift(this.temp)
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 模拟更新角色
          const index = this.list.findIndex(v => v.id === this.temp.id)
          this.list.splice(index, 1, this.temp)
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除该角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟删除角色
        const index = this.list.findIndex(v => v.id === row.id)
        this.list.splice(index, 1)
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handlePermission(row) {
      this.currentRoleId = row.id
      this.permissionDialogVisible = true
      // 模拟获取角色权限
      this.$nextTick(() => {
        // 随机勾选一些权限
        const checkedKeys = []
        if (Math.random() > 0.5) checkedKeys.push(11)
        if (Math.random() > 0.5) checkedKeys.push(12)
        if (Math.random() > 0.5) checkedKeys.push(13)
        if (Math.random() > 0.5) checkedKeys.push(21)
        if (Math.random() > 0.5) checkedKeys.push(22)
        if (Math.random() > 0.5) checkedKeys.push(23)
        this.$refs.permissionTree.setCheckedKeys(checkedKeys)
      })
    },
    updatePermission() {
      // 模拟保存权限
      const checkedKeys = this.$refs.permissionTree.getCheckedKeys()
      console.log('保存权限:', checkedKeys)
      this.permissionDialogVisible = false
      this.$notify({
        title: '成功',
        message: '权限配置已保存',
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}
.filter-item {
  margin-right: 10px;
}
</style>